点击按钮触发div颜色改变的几种写法 |
您所在的位置:网站首页 › web 选择器中字体改变颜色 › 点击按钮触发div颜色改变的几种写法 |
目录JavaScript行内事件onclick绑定关于选取元素关于改变颜色addEventListenerjQuery获取元素绑定事件设置样式css()添加classVuev-bind动态绑定样式动态绑定class
前几天面试,问的第一个问题就是这个,但是我第一次面试过于紧张,也可能是基础不扎实,特在此重新总结一下该问题的解答。 JavaScript假设HTML相关代码如下: div { width: 100px; height: 100px; border: 1px solid black; } 点击变色那么使用JS事件处理有3种写法: 行内事件在div标签内加入onclick="document.getElementById('a').style.backgroundColor='pink';" 测试效果如下,符合预期。 ![]() 如果响应函数在js中定义,则在行中调用时切记要加上(),即。 onclick绑定js代码如下: var div = document.getElementById('a'); var btn = document.getElementById('b'); btn.onclick = function(){ div.style.backgroundColor = 'pink'; } // 也可以采用下面这种写法 function btnClick(){} btn.onclick = btnClick; 关于选取元素要特别注意getElementById参数不需要加#,而且同系列函数常用的还有getElementsByClass和getElementsByTag,除了id选取其他都是得到数组,切记使用时要加下标。 还可以使用querySelector方法,使用如下: var div = document.querySelector('#a');与之配套的是querySelectorAll方法,返回数组。 关于改变颜色 改变颜色也有几种方式,首先是通过给style.property赋值的方式修改,但是属性property要采用小驼峰命名法,如同我们上述所写: div.style.backgroundColor = 'pink';这种方式如果要添加多个样式则过于繁琐。 还可以采用给style.cssText赋值的方式修改(属性名和写css时一样),如下: div.style.cssText = 'background-color: pink';但是采用这种方式进行修改,前面的cssText会被后面的覆盖,例: div.style.cssText = 'background-color: pink'; div.style.cssText = 'border-color: red';在点击后,显示效果变为: ![]() 显然覆盖了前一句背景颜色,但是我们写在style标签中的样式并没有覆盖。 我们还可以通过获取样式表对象,调取insertRule和addRule方法来改变样式(首先我们要有一个外部CSS文件,哪怕是空的也行),代码如下 var sheet = document.styleSheets[0]; // insertRule sheet.insertRule('div{background-color:pink;}'); //addRule sheet.addRule('div', 'background-color:pink;');两者的参数稍微有些不同,可以点此查阅。使用这种方式,经测试不会覆盖前面样式。 (但是有点奇怪的是我更改border-color这个属性时,insertRule修改不了,而addRule可以) addEventListener上述两种方式属于DOM Level0的事件处理模型,但它们没法在同一个事件上绑定多个事件处理程序,接下来我们使用DOM Level2的事件处理模型来解答。 在一般浏览器上使用addEventListener添加事件,使用removeEventListener移除事件;在IE浏览器中使用attachEventListener添加事件,使用detachEventListener移除事件。 function btnClick() { div.style.backgroundColor = 'pink'; } //一般浏览器 div.addEventListener('click', btnClick); //IE浏览器 div.attachEventListener('click', btnClick);在JS一节中的样式改变方式此处同样适用。 推荐使用此种方式,详情见此。 其实可以不需要按钮,直接点击div修改颜色,见这篇博客。 jQuery首先要引入jquery文件: 获取元素 var $div = $('#a'); var $btn = $('#b');有jquery封装,获取元素变得简便许多。 绑定事件同样有类似JS的三种方式,此处直接一并写了(行内一样,不再赘述): function btnClick(){} // click $btn.click(btnClick); //on $btn.on('click', btnClick);其中差距如同JS,on绑定多个事件可以直接在第一个参数字符串中间隔一个空格加上,如: $btn.on('click mouseover', btnClick); 设置样式 css() //设置单个属性 $div.css('background-color', 'pink'); //设置多个属性 $div.css({'background-color': 'pink', 'border-color': 'red';}) 添加class //在style标签中设置class .pink{background-color: pink;} //修改样式 $div.addClass('pink'); Vue最近正好在学习Vue,索性也写一写。 首先引入vue文件: #a{ width: 100px; height: 100px; border: 1px solid black; } //写好模板 按钮 const app = new Vue({ el: '#app', data: {}, methods: {} }) v-bind动态绑定样式在vue实例中定义相关变量和方法: data:{ color: ''; }, methods:{ btnClick(){ this.color = 'pink'; } }在元素中绑定属性和事件: 按钮还可以直接设置绑定style,为了测试是否会覆盖样式我添加了一个按钮及事件: data: { style: {}, }, methods: { btnClick() { this.style = { 'background-color': 'pink' }; }, btnClick2() { this.style = { 'border-color': 'red' }; } } //div 按钮1 按钮2点击按钮1: ![]() 点击按钮2: ![]() 解决办法,将赋值改为添加属性: btnClick() { Vue.set(this.style, 'background-color', 'pink'); }, btnClick2() { Vue.set(this.style, 'border-color', 'red'); }点击按钮1再点击按钮2后结果为: ![]() 如此不会覆盖。 动态绑定classdiv元素绑定属性class: //首先定义样式 .pink{background-color: pink;}修改vue实例的data和方法: data: { isPink: false, }, methods: { btnClick(){ this.isPink = true; } }测试结果:点击后正常显示背景色。 也可以在class属性中动态添加样式class,实现方法有许多,我们就介绍到此。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |